<template>
<transition name="demo" appear>
  <div class="msg-dv" v-if="props.isShow">
      {{msg}}
  </div>
</transition>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import showMessage from '@/units/message/message';
const props = defineProps({
  msg: {
      type: String,
      default: ''
  },
  isShow: {
      type: Boolean,
      default: false
  },
  duration: {
      type: Number,
      default: 1000
  }
})
watch(()=>props.isShow,(val)=>{
  if(val) {
      setTimeout(()=>{
        showMessage({
            isShow: false
        })
    },props.duration + 1000)
  }
},{
    immediate: true,
    deep: true
})
</script>
<script lang='ts'>
import {
    defineComponent, isShallow, onMounted, onUnmounted, watch
} from 'vue';
export default defineComponent({
    name:'message',
})
</script>

<style scoped lang='scss'>
.msg-dv {
    width: 300px;
    height: 50px;
    position: absolute;
    left:50%;
    top: 45%;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    margin-left: -150px;
    background-color: rgb(229, 96, 96);
    &.demo-enter-from,
    &.demo-leave-to {
      opacity: 0;
      transform: translateY(-50px);
    }
    &.demo-enter-active,
    &.demo-leave-active {
      transition: 1s linear;
    }
}
</style>